<template>

    <el-container style="min-height: 100vh;">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246); height: 100%">
        <Aside />
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px; border-bottom: 1px solid #ccc;line-height: 60px;">
          <el-dropdown style="cursor:pointer ">
            <span>Hoshiyomi</span><i class="el-icon-position"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <div style="margin-bottom: 30px">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-main>
          <div style="margin: 10px 0">
            <el-input style="width: 200px"  placeholder="输入姓名" suffix-icon="el-icon-search"></el-input><el-button class="ml-5" type="primary">搜索</el-button>
            <el-input style="width: 200px"  placeholder="输入地址" suffix-icon="el-icon-position" class="ml-5"></el-input><el-button class="ml-5" type="primary">搜索</el-button>
          </div>
          <div style="margin: 10px 0">
            <el-button type="primary">新增</el-button>
            <el-button type="danger">批量删除</el-button>
          </div>
          <el-table :data="tableData" border stripe:header-cell-class-name="headerBg">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column>
              <template slot-scope="scape">
                <el-button type="primary">编辑</el-button>
                <el-button type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="padding: 10px 0">
            <el-pagination
                :page-sizes="[5, 10, 15, 20]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
            </el-pagination>
          </div>
        </el-main>

      </el-container>
    </el-container>

</template>

<script>
import Aside from "@/components/Aside";

export default {
  name: 'HomeView',
components:{
    Aside
},

  data() {
    const item = {
      date: '2022-4-20',
      name: '陆王胜',
      address: '1'

    };
    const item1 = {
      date: '2022-4-20',
      name: '陆王胜',
      address: '2'

    };


    return {
      tableData: Array(2).fill(item,0).fill(item1,1)
    }
  }
}
</script>
